<!--  -->
<template>
  <div class="app-container">
     <el-form
       v-show="showSearch"
       ref="queryForm"
       :model="queryParams"
       :inline="true"
       label-width="68px"
     >
       <el-form-item label="名称" prop="imageTitle">
         <el-input
           v-model="queryParams.imageTitle"
           placeholder="请输入名称"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
         >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           disabled
           >新增</el-button
         >
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
           plain
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
           >删除</el-button
         >
       </el-col>
     </el-row>
     <el-table
       v-loading="loading"
       :data="imagesList"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="id" />
       <el-table-column label="创始人" align="center" prop="blogcreate" />
       <el-table-column prop="blogtext" label="内容" align="center" />
       <el-table-column prop="blogtexttwo" label="内容2" align="center" />
       <el-table-column prop="announcement" label="公告" align="center" />
       <el-table-column label="图片" align="center" prop="blogimage" />
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
           <el-button
             v-hasPermission="['content:link:edit']"
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             >修改</el-button
           >
           <el-button
             v-hasPermission="['content:link:remove']"
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             >删除</el-button
           >
           
         </template>
       </el-table-column>
     </el-table>
 
     <el-pagination
       :page-size.sync="queryParams.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       :page-sizes="[10, 20, 30, 40]"
       :current-page.sync="queryParams.pageNum"
       @current-change="getImagesList"
       @size-change="getImagesList"
     />
 
     <!-- 添加或修改友链对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="创始人" prop="blogcreate">
           <el-input v-model="form.blogcreate" placeholder="请输入创始人" />
         </el-form-item>
 
         <el-form-item label="内容" prop="blogtext">
           <el-input v-model="form.blogtext" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="内容2" prop="blogtexttwo">
           <el-input v-model="form.blogtexttwo" placeholder="请输入内容2" />
         </el-form-item>
         <el-form-item label="公告" prop="announcement">
           <el-input v-model="form.announcement" placeholder="请输入公告" />
         </el-form-item>
         <el-form-item label="图片" prop="imageUrl">
           <el-input v-model="form.blogimage" placeholder="请输入地址" />
         </el-form-item>
         <el-form-item label="地址" prop="imageUrl">
           <el-upload
             
             class="upload-demo"
             action="/seedupload"
             name="img"
             :http-request="handleUpload"
             :before-upload="beforeUpload"
             :on-exceed="onExceed"
             
           >
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">
               只能上传jpg/png文件，且不超过2MB
             </div>
           </el-upload>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 
 import {getannouncement,getannouncementinfo,updateannouncement,announcementuploadImg} from "@/api/content/announcement"
 export default {
   name: "Link",
   data() {
     return {
       // 遮罩层
       loading: true,
       // 导出遮罩层
       exportLoading: false,
       // 选中数组
       ids: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 总条数
       total: 0,
       // 友链表格数据
       imagesList: null,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         imageName: null,
         imageTitle: null,
         imageUrl: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {},
     };
   },
   created() {
     this.getImagesList();
   },
   methods: {
     //获取图片列表
     getImagesList() {
       this.loading = true;
       getannouncement(this.queryParams).then((response) => {
         //console.log(response)
         this.imagesList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
     // 表单重置
     reset() {
       this.form = {
         id: null,
         imageName: null,
         imageTitle: null,
         imageUrl: null,
       };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getImagesList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加公告";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
       getannouncementinfo(id).then((response) => {
         this.form = response;
         this.open = true;
         this.title = "修改公告";
       });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
             updateannouncement(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getImagesList();
             });
           } else {
             addImage(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getImagesList();
             });
           }
         }
       });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal
         .confirm('是否确认删除轮播图编号为"' + ids + '"的数据项？')
         .then(function () {
           return delImage(ids);
         })
         .then(() => {
           this.getImagesList();
           this.$modal.msgSuccess("删除成功");
         })
         .catch(() => {});
     },
     onExceed() {
       this.$message.error("只能上传一个图片");
     },
     handleUpload(img) {
       announcementuploadImg(img.file)
         .then((response) => {
           this.form.blogimage = response;
           this.fileList.push({ name: img.file.name, url: response });
           this.imagevalue = true;
           this.$message.success("上传成功");
         })
         .catch((error) => {
           this.$message.error(error.msg);
         });
     },
     beforeUpload(file) {
       // 添加上传前的校验逻辑
       const isJPG = file.type === "image/jpeg" || file.type === "image/png";
       const isLt2M = file.size / 1024 / 1024 < 2;
 
       if (!isJPG) {
         this.$message.error("只能上传 JPG/PNG 格式的图片");
       }
       if (!isLt2M) {
         this.$message.error("图片大小不能超过 2MB");
       }
 
       return isJPG && isLt2M;
     },
     
   },
 };
 </script>
 
 <style  scoped>
 
 </style>
 
